@import '../css/global.scss';
.file_manager_container{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100% - 15px);
}

.head_box{
  position: relative;
  padding-top: pxFn(25);
  .title{
    padding: 0 30px;
    text-align: center;
    font-size: pxFn(20);
    font-weight: bold;
    color: #272848;
    letter-spacing: 0.27px;
    word-break: break-all;
  }
  .more_box{
    position: absolute;
    top: 0;
    right: pxFn(58);
    cursor: pointer;
    .more_ul{
      display:none;
      position: absolute;
      list-style: none;
      background: #fff;
      margin: 0;
      padding: 0;
      border: 1px solid #eee;
      min-width: pxFn(100);
      right: 0;
      color: #6A7078;
    }
    &:hover{
      .more_ul{
        display: block;
        li{
          list-style: none;
          padding: pxFn(10);
          &:hover{
            background: #F5F7FF;
          }
        }
      }
      
    }
  }
}
.file_list_container{
  background: #fff;
  height:100%;
  margin: pxFn(20) pxFn(30);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .parent_path{
    display:flex;
    align-items: center;
    cursor: pointer;
    margin: pxFn(10) pxFn(10) 0;
    font-size: 16px;
    color: #7284FB;
    letter-spacing: 0;
    line-height: 16px;
    word-break: break-all;
    .ico_back{
      width: pxFn(40);
      height: pxFn(40);
      background: url('') no-repeat center;
    }
    &:hover{
      .ico_back{
        background: url('') no-repeat center;
      }
    }
  }
  .file_list {
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    margin-top: pxFn(20);
    .file_item {
      width: pxFn(110);
      box-sizing: border-box;
      margin: 0 pxFn(10) pxFn(28);
      font-size: 14px;
      color: #6A7078;
      letter-spacing: 0;
      text-align: center;
      line-height: 14px;
      cursor: pointer;
      .file_img {
        width: pxFn(80);
        height: pxFn(80);
      }
      .file_name {
        max-height: pxFn(28);
        overflow: hidden;
        word-break: break-all;
        padding: pxFn(5);
      }
      &:hover, &.selected {
        .file_img{
            background: #F2F3FB;
            border-radius: pxFn(5);
        }
      }
      &.selected {
        .file_name{
          background: #6a7078;
          color: #fff;
          border-radius: pxFn(5);
        }
      }
    }
    .no_data{
      width: 100%;
      text-align: center;
      color: #6A7078;
      font-size: 14px;
    }
  }
}
.btn_container{
  width:100%;
  display:flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding-bottom: pxFn(20);
  .btn_box{
    display: flex;
    justify-content: center;
    align-items: center;
    margin:0 pxFn(10);
    border: none;
    color: #fff;
    border-radius: pxFn(24);
    width: pxFn(150);
    height: pxFn(48);
    line-height: pxFn(48);
    padding: 0 pxFn(10);
    font-size: pxFn(16);
    background:  #7284FB;
    cursor: pointer;
    img{
      width: pxFn(40);
      height: pxFn(40);
    }
  }
}
.loading_box{
  width: 100%;
  height: 100%;
  background: transparent;
  position: fixed;
  top:0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  img{
    width: pxFn(80);
    height: pxFn(82);
    margin-right: pxFn(0);
  }
}
